<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 左侧菜单 -->
      <el-col :span="4">
        <el-menu
          :default-active="activeMenu"
          class="wms-menu"
          @select="handleMenuSelect"
        >
          <el-menu-item index="warehouse">
            <i class="el-icon-office-building"></i>
            <span slot="title">仓库管理</span>
          </el-menu-item>
          <el-menu-item index="inventory">
            <i class="el-icon-box"></i>
            <span slot="title">库存管理</span>
          </el-menu-item>
          <el-menu-item index="receipt">
            <i class="el-icon-takeaway-box"></i>
            <span slot="title">入库管理</span>
          </el-menu-item>
          <el-menu-item index="shipment">
            <i class="el-icon-sold-out"></i>
            <span slot="title">出库管理</span>
          </el-menu-item>
          <el-menu-item index="check">
            <i class="el-icon-notebook-2"></i>
            <span slot="title">盘点管理</span>
          </el-menu-item>
          <el-menu-item index="report">
            <i class="el-icon-data-line"></i>
            <span slot="title">报表中心</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      
      <!-- 右侧内容 -->
      <el-col :span="20">
        <router-view />
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Wms',
  data() {
    return {
      activeMenu: this.$route.meta.activeMenu || 'warehouse'
    }
  },
  methods: {
    handleMenuSelect(index) {
      this.activeMenu = index
      this.$router.push({ name: index })
    }
  }
}
</script>

<style scoped>
.wms-menu {
  min-height: calc(100vh - 84px);
}
</style>